<template>
  <div id="dialog-message">
    <el-dialog :title="keys.title" :visible.sync="dialogVisible" width="30%" :center="keys.center||false">
      <div class="text">
        <span>该笔订单已开发票，执行退款后，已开发票将 <i style="color: red;">自动冲红作废</i>，请<i style="color: red;">及时知悉客户</i>
          哦~</span>
        <span>全额退款冲红作废后不可继续开发票，部分退款冲红作废后剩余订单金额可重新开票</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="handleCancel">取 消</el-button>
        <el-button round type="primary" @click="handelDetermin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'ConfirmMessage',
  props: {
    keys: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: true
    }
  },
  computed: {
    names() {
      const { content } = this.keys
      return content
    }
  },
  methods: {
    handelDetermin() {
      const { communicate } = this.keys
      communicate.callbackFn(Promise.resolve())
      this.dialogVisible = false
    },
    handleCancel() {
      const { communicate } = this.keys
      communicate.callbackFn(Promise.reject(new Error('cancle')))
      this.dialogVisible = false
    }
  }
}
// import { ref, defineProps } from "vue";
// const props = defineProps(["title", "text", "type", "communicate"]);
// const dialogVisible = ref(true);
// const loading = ref(false);
// // 确定
// const handelDetermin = (done: () => void) => {
//   loading.value = true;
//   props.communicate.callbackFn(Promise.resolve(cancelLoading));
// };
// // 取消
// const handleCancel = () => {
//   dialogVisible.value = false;
//   props.communicate.callbackFn(Promise.reject(new Error("cancle")));
// };
// // 取消loading
// const cancelLoading = () => {
//   loading.value = false;
//   dialogVisible.value = false;
// };
</script>
<style scoped lang="scss">
i {
    font-style: normal;
}

.text {
    width: 100%;
    text-align: center;

    span {
        display: block;
        margin-bottom: 10px !important;
    }
}

#dialog-message .dialog-fade-enter-active {
  animation: my-dialog-fade-in 0.3s !important;

}

#dialog-message .dialog-fade-leave-active {

  animation: my-dialog-fade-out 0.3s !important;

}

@keyframes my-dialog-fade-in {

  0% {

    transform: translate3d(100%, 0, 0) !important;

    opacity: 0 !important;

  }

  100% {

    transform: translate3d(0, 0, 0) !important;

    opacity: 1 !important;

  }

}

@keyframes my-dialog-fade-out {

  0% {

    transform: translate3d(0, 0, 0) !important;

    opacity: 1 !important;

  }

  100% {

    transform: translate3d(100%, 0, 0) !important;

    opacity: 0 !important;

  }

}
</style>
